<template>
  <div class="paas-deploy-log-wrapper">
    <stage-item
      v-if="isShowReady"
      ref="readyStageRef"
      :title="$t('准备阶段')"
      :data="readyList"
    />
    <stage-item
      v-if="isShowBuild"
      ref="buildStageRef"
      :title="$t('构建阶段')"
      can-full-screen
      :data="buildList"
      style="margin-top: 8px;"
    />
    <deploy-stage-item
      v-if="isShowRelease"
      ref="nowStageRef"
      :loading="processLoading"
      :release-list="releaseList"
      :data="processList"
      style="margin-top: 8px;"
      :environment="environment"
    />
    <skip-stage-item
      v-if="isShowSkip"
      style="margin-top: 8px;"
    />
  </div>
</template>
<script>
import StageItem from './render-stage';
import SkipStageItem from './render-skip-stage';
import DeployStageItem from './deploy-stage';
export default {
  name: '',
  components: {
    StageItem,
    SkipStageItem,
    DeployStageItem,
  },
  props: {
    readyList: {
      type: Array,
      default: () => [],
    },
    buildList: {
      type: Array,
      default: () => [],
    },
    releaseList: {
      type: Array,
      default: () => [],
    },
    processList: {
      type: Array,
      default: () => [],
    },
    stateProcess: {
      type: Array,
      default: () => [],
    },
    isShowSkip: {
      type: Boolean,
      default: false,
    },
    // 部署阶段获取部署进程的loading
    processLoading: {
      type: Boolean,
      default: false,
    },
    environment: {
      type: String,
      default: 'stag',
    },
  },
  data() {
    return {};
  },
  computed: {
    isShowReady() {
      return this.stateProcess.includes('preparation');
    },
    isShowBuild() {
      return this.stateProcess.includes('build');
    },
    isShowRelease() {
      return this.stateProcess.includes('release');
    },
  },
  watch: {
    buildList: {
      handler() {
        this.$nextTick(() => {
          this.$refs.buildStageRef && this.$refs.buildStageRef.handleScrollToBottom();
        });
      },
      immediate: true,
    },
  },
  methods: {
    handleScrollToLocation(type) {
      const $dom = document.querySelector('.paas-deploy-log-wrapper');
      if (type === 'preparation') {
        $dom.scrollTo(0, 0);
        return;
      }
      if (type === 'release') {
        const $ref = this.$refs.nowStageRef;
        const distance = $ref.$el.offsetTop || 0;
        $dom.scrollTo(0, distance);
      }
    },
  },
};
</script>
<style lang="scss">
    .paas-deploy-log-wrapper {
        margin-left: 20px;
        padding: 17px 30px;
        width: calc(100% - 250px);
        height: 670px;
        background: #313238;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            background-color: lighten(transparent, 80%);
        }
        &::-webkit-scrollbar-thumb {
            height: 5px;
            border-radius: 2px;
            background-color: #63656e;
        }
    }
</style>
